<script setup lang="ts">
  import startIcon from '@/static/images/start.png'
  import endIcon from '@/static/images/end.png'
  import carIcon from '@/static/images/car.png'
  import type { ExpressData } from '@/types/order'
  import { computed } from 'vue'

  interface Props {
    logisticsInfo: ExpressData
  }
  const props = defineProps<Props>()

  const start = computed(() => {
    return props.logisticsInfo.logisticsInfo[props.logisticsInfo.logisticsInfo.length - 1]
  })

  const end = computed(() => {
    return props.logisticsInfo.logisticsInfo[0]
  })

  const current = computed(() => {
    return props.logisticsInfo.currentLocationInfo
  })
</script>

<template>
  <map
    :markers="[
      {
        id: 1,
        latitude: parseFloat(start?.latitude),
        longitude: parseFloat(start?.longitude),
        iconPath: startIcon,
        width: 20,
        height: 20,
      },
      {
        id: 2,
        latitude: parseFloat(current?.latitude),
        longitude: parseFloat(current?.longitude),
        iconPath: carIcon,
        width: 20,
        height: 20,
      },
      {
        id: 3,
        latitude: parseFloat(end?.latitude),
        longitude: parseFloat(end?.longitude),
        iconPath: endIcon,
        width: 20,
        height: 20,
      },
    ]"
    :latitude="parseFloat(current?.latitude)"
    :longitude="parseFloat(current?.longitude)"
    :scale="5"
    :polyline="[
      {
        points: props.logisticsInfo.logisticsInfo.map((item) => {
          return {
            longitude: parseFloat(item.longitude),
            latitude: parseFloat(item.latitude),
          }
        }),
        width: 4,
        color: '#2cb5a5',
      },
    ]"
    class="uni-map"
  ></map>
</template>

<style lang="scss">
  .uni-map {
    width: 100%;
    height: 470px;
  }
</style>
